import { render } from 'react-dom';
import { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import 'antd-v3/dist/antd.css';
import 'antd/dist/antd.css';
import 'react-texty/styles.css';

import './index.css';

import MyRouter from './src/MyRouter';

function fallbackRender({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: 'red' }}>{error.message}</pre>
      <button onClick={resetErrorBoundary}>retry</button>
    </div>
  );
}

render(
  <ErrorBoundary
    fallbackRender={fallbackRender}
    onReset={() => {
      console.log('reset');
    }}
    onError={(e) => {
      console.log(e);
    }}
  >
    <Suspense fallback={<div>loading...</div>}>
      <MyRouter></MyRouter>
    </Suspense>
  </ErrorBoundary>,
  document.getElementById('root')
);
